<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>类别管理</title>
    <link rel="stylesheet" href="./css/kind.css">
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form method="post" action="#" id="kindForm">
    <input type="button" class="button1" value="新增" src="*" id="add_open">
    输入关键词：<input type="text" name="kindName" id="kindName" placeholder="分类关键字">
    <button type="button" class="queryBtn" style="color: white; background-color: #1d85eb">查询</button>
    <input type="button" style="color: white;background-color: #ef5050" value="删除勾选分类" id="deleteBatch">
    <div id="add">
        <div class="add_kind">
            <i>添加类别</i>
        </div>
        <input type="text" name="articleKind" placeholder="新增类别名" id="text">
        <div class="add_bottom">
            <div class="bottom_right">
                <input type="button"value="取消" src="*" id="cancel">
                <input type="button"value="确定" src="*" id="confirm">
            </div>
        </div>
    </div>
</form>
<table border="1" cellspacing="0" align="center" class="con-b">
    <h2>类别列表：</h2>
    <tbody>
        <thead>
        <tr class="row">
            <td><input type="checkbox" id="j_cbAll">全选</td>
            <td>类别编号</td>
            <td>分类名</td>
            <td>删除类别</td>
        </tr>
        </thead>


        <tbody id="j_tb">

    </tbody>
</table>
<script>

    $(function (){
        findAllUsers();
    });

    function findAllUsers(){
        $.ajax({
            type:"get",
            url:'articleKind/findAllArticleKind.do',
            dataType:"json",
            success:function (result){
                console.info(result);
                $(result).each(function (index,item) {
                    var $trs =
                        `<tr>
                            <td><input type="checkbox" name="ck" id="ck" value="`+item.articleKindId+`"></td>
                            <td className="lf">`+item.articleKindId+`</td>
                            <td className="lf">`+item.articleKind+`</td>
                            <td><button class="deleteBtn" type="submit" style="color: white; background-color: #ef5050">删除</button></td>
                        </tr>`;
                    $("#j_tb").append($trs);
                });
            }
        });
    }

    $(".queryBtn").click(search);

    $("#kindName").keydown(function (e){
        if(e.key==="Enter"){
            search();
        }
    })

    function search(){
        var data = $("#kindName").serialize();
        $.get("articleKind/findByKindName.do?"+data,function (result){
            console.info(result);
            $("#j_tb").empty();
            $(result).each(function (index,item) {
                var $trs =
                    `<tr>
                            <td><input type="checkbox" name="ck" id="ck" value="`+item.articleKindId+`"></td>
                            <td className="lf">`+item.articleKindId+`</td>
                            <td className="lf">`+item.articleKind+`</td>
                            <td><button class="deleteBtn" type="submit" style="color: white; background-color: #ef5050">删除</button></td>
                        </tr>`;
                $("#j_tb").append($trs);
            });
        });
    }



    $(document).on("click",".deleteBtn",function (result){
        var flag = window.confirm("您确定要删除该类别吗？...");
        if(flag){
            var articleKindId =  $(this).parents("tr").children().eq(1).text();
            $.get("articleKind/deleteByArticleKindId.do?articleKindId="+articleKindId,function (result){
                console.info(result);
                if(result.msg){
                    alert(result.msg);
                    window.location.reload();
                }
                else {
                    alert(result.error);
                }
            });
        }
    });

    $("#confirm").click(function (){
       var data = $("#text").serialize();
       $.post("articleKind/saveKind.do",data,function (result){
          if(result.msg){
              alert(result.msg)
              window.location.reload();
          } else {
              alert(result.error)
          }
       });
    });

    $("#deleteBatch").click(deleteBatch);

    function deleteBatch(){
        var zhi = $("input[name=ck]:checked");
        var str="";
        var id = "";
        if(zhi.length==0){
            alert("请选择要删除的类别");
        }else {
            if(confirm("您确定删除选择的"+zhi.length+"种类别吗？")){
                $.each(zhi,function (index,item){
                    id=$(item).val();
                    if(id!=null)
                        str+=id+",";

                });
                $.ajax({
                    url: 'articleKind/deleteBatch.do',
                    data:{"articleKindIds":str},
                    dataType: "text",
                    type: "get",
                    success:function (msg){
                        window.location.reload();
                    }
                });
            }
        }
    }






    let btn=document.getElementById('add_open');
    let add=document.getElementById('add');
    let btn_cancel=document.getElementById('cancel');

    btn.onclick=function (){
        add.style.display="block";
    }
    btn_cancel.onclick=function (){
        add.style.display="none";
    }


    // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function () {
        // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
        console.log(this.checked);
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }
    // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function () {
            // flag 控制全选按钮是否选中
            var flag = true;
            // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
            for (var i = 0; i < j_tbs.length; i++) {
                if (!j_tbs[i].checked) {
                    flag = false;
                    break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                }
            }
            j_cbAll.checked = flag;
        }
    }

</script>
</body>
</html>
